//仓库
const store = new Vuex.Store({
    state: () => ({
        SelectElement: '',//当前是否选中某元素
        SortableSwitch: true,//是否开启拖拽组件属性
        RowItemMark: [],//栅格标记位，被标记的id保存到这
        RowItemSort: [],//拖拽标记位，拖拽是触发
        Components: [],//全部组件的对象
        SelecteComponent: {},//当前选中的组件
        transfer: {},//传参
        fit: [{//图片布局
            label: '全铺',
            value: 'fill',
        }, {
            label: '自适应缩放',
            value: 'contain',
        }, {
            label: '完全填充',
            value: 'cover',
        }, {
            label: '移除样式',
            value: 'none',
        }, {
            label: '屏幕适配',
            value: 'scale-down'
        }],
        unit: [{//单位
            label: 'px',
            value: 'px',
        }, {
            label: '%',
            value: '%',
        }, {
            label: 'vh',
            value: 'vh',
        }],
        predefineColors: ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399'],//可选颜色颜色
        size: [{//尺寸
            label: '正常',
            value: ''
        }, {
            label: '中等',
            value: 'medium'
        }, {
            label: '小',
            value: 'small'
        }, {
            label: '更小',
            value: 'mini'
        }],
        Query: getQueryObject(),//导航栏参数
        hide: false
    }),
    mutations: {//commit调用
        setSelectElement(state, payload) {
            state.SelectElement = payload
        },
        setSortableSwitch(state) {
            state.SortableSwitch = !state.SortableSwitch
        },
        setRowItemMark(state, payload) {
            state.RowItemMark = payload
        },
        setRowItemSort(state, payload) {
            state.RowItemSort = payload
        },
        setSelecteComponent(state, payload) {
            state.SelecteComponent = payload
        },
        setTransfer(state, payload) {
            state.transfer = payload
        },
        setComponents(state, payload) {
            state.Components = payload
        },
    },
});
//主体通用
const main = {
    data() {
        return {
            instantiate: [],//实例化
            components: [{
                title: 'shop-list',
                config: 'shop-list-config',
                slot: false,
                name: '商品瀑布流',
                data: {
                    left: 10,//间距
                    right: 10,
                    top: 0,
                    bottom: 0,
                    paddingTop: 10,
                    paddingLeft: 0,
                    paddingBottom: 0,
                    paddingRight: 0,
                    backgroundColor: 'rgba(247, 245, 246, 0)',
                    CardBackgroundColor: '#fff',
                    CardborderRadius: 10,
                    CardCount: 10,
                    TextTop: 0,
                    TextLeft: 10,
                    TextBottom: 10,
                    TextRight: 10,
                    Activity_SerialNumber: 'M_business_daily_execute_unitprice',
                }
            }, {
                title: 'classify',
                config: 'classify-config',
                slot: false,
                name: '分类组件',
                data: {
                    top: 10,//上边距
                    right: 10,//右
                    bottom: 10,//下
                    left: 10,//左
                    paddingTop: 0,
                    paddingRight: 0,
                    paddingBottom: 0,
                    paddingLeft: 0,
                    backgroundColor: '#fff',
                    borderRadius: 10,
                    ItemTop: 10,
                    ItemRight: 10,
                    ItemBottom: 10,
                    ItemLeft: 10,
                    ItemborderBottomWidth: 1,
                    ItemborderBottomColor: 'rgb(245,108,108)',
                    ItemColor: '#000',
                    fontSize: 16,
                    selectedfontSize: 16,
                    selectedfontWeight: 100,
                    fontWeight: 100,
                    selectedColor: 'rgb(245,108,108)',
                    value: '',
                }
            }, {
                title: 'card-list',
                config: 'card-list-config',
                slot: false,
                name: '列表组件',
                data: {
                    top: 10,//上边距
                    right: 10,//右
                    bottom: 10,//下
                    left: 10,//左
                    paddingTop: 10,
                    paddingRight: 0,
                    paddingBottom: 10,
                    paddingLeft: 0,
                    backgroundColor: '#fff',
                    borderRadius: 5,
                    color: '#000',
                    fontSize: 13,
                    fontWeight: '700',
                    ItemTop: 0,
                    ItemBottom: 0,
                    ItemLeft: 10,
                    ItemRight: 10,
                    ItempaddingTop: 0,
                    ItempaddingLeft: 0,
                    ItempaddingRight: 0,
                    ItempaddingBottom: 0,
                    isIcon: true,
                    list: [{
                        title: '员工身份绑定',
                        type: 'wx',
                        url: '/pages/index/login',
                    }]
                }
            }, {
                title: 'swiper',
                config: 'swiper-config',
                slot: false,
                name: '轮播图',
                data: {
                    arrow: 'never',//切换箭头展示
                    times: 2,//轮播时长 单位:s
                    type: "",//类型 空:默认  card:卡片化
                    trigger: "click",//指示器触发条件
                    radius: 10,//圆角弧度
                    left: 10,//左边距
                    right: 10,//右边距
                    top: 10,//上边距
                    bottom: 0,//下边距
                    direction: 'horizontal',//滚动方向 水平:horizontal 垂直:vertical
                    height: '150',//高度
                    Children: {
                        image: [{
                            Picture_URL: '',
                            fit: 'contain',
                            url: '',
                            type: 'wx',
                        }]
                    }
                }
            }, {
                title: 'search',
                config: 'search-config',
                slot: false,
                name: '搜索框',
                data: {
                    value: '',
                    top: 0,
                    bottom: 0,
                    right: 0,
                    left: 0,
                    paddingTop: 0,
                    paddingRight: 0,
                    paddingBottom: 0,
                    paddingLeft: 0,
                    buttonColor: 'rgba(253, 72, 67,0)',
                    backgroundColor: '#fff',
                    color: '#000',
                    searchWidth: '15',
                    searchValue: '搜索',
                    placeholder: '搜索您想要的商品',
                    distance: 0,
                    borderRadius: 0,
                    buttonRadius: 0,
                    isbutton: false,//是否显示按钮
                    disabled: true,//是否禁用
                    click: {
                        type: 'wx',
                        url: '/pages/index/search'
                    }
                }
            }, {
                title: 'option',
                config: 'option-config',
                slot: false,
                name: '选项框',
                data: {
                    column: 4,
                    backgroundColor: '#fff',
                    borderRadius: 10,
                    top: 0,
                    bottom: 0,
                    left: 10,
                    right: 10,
                    paddingTop: 10,
                    paddingBottom: 0,
                    paddingRight: 0,
                    paddingLeft: 0,
                    ItemBottom: 10,
                    iconWidth: 40,
                    iconHeight: 40,
                    fontSize: 15,
                    fontWeight: 100,
                    color: '#000',
                    lineHeight: 22,
                    type:'0',
                    list: [{
                        src: '',
                        title: '请输入',
                        type: 'wx',
                        url: '/pages/index/searchGoods'
                    }]
                }
            }, {
                title: 'activity-pop',
                config: 'activity-pop-config',
                slot: false,
                name: '活动弹窗',
                data: {
                    title: '活动',
                    backgroundImage: '',
                    height: 70,
                    borderRadius: 15,
                    fiexdRight: 10,
                    fiexdbottom: 35,
                    buttonwidth: 40,
                    buttonheight: 40,
                    buttonborderRadius:5,
                    buttonbackgroundColor: 'red',
                    buttonfontSize: 12,
                    buttonfontWeight: 100,
                    buttonfontbgColor:'rgba(255, 255, 255, 0)',
                    buttonfontBorderColor:'#000',
                    buttonfontBorderwidth:0,
                    buttonfontBorderRadius:0,
                    buttonColor: '#000',
                    buttonImagewidth:65,
                    buttonImageheight:65,
                    buttonImageRadius:10,
                    buttonImageBorderColor:'',
                    buttonImageBorderwidth:0,
                    buttonfonttop:0,
                    buttonfontbottom:0,
                    buttonfontleft:0,
                    buttonfontright:0,
                    buttonfontpaddingtop:0,
                    buttonfontpaddingbottom:0,
                    buttonfontpaddingleft:0,
                    buttonfontpaddingright:0,
                    backgroundColor: 'rgb(253, 244, 242)',
                    color: '#fff',
                }
            }, {
                title: 'shop-list1',
                config: 'shop-list1-config',
                slot: false,
                name: '商品列表',
                data: {
                    backgroundColor: '#f7f5f6',
                    paddingTop: 0,
                    paddingBottom: 0,
                    paddingLeft: 0,
                    paddingRight: 0,
                    marginTop: 0,
                    marginBottom: 0,
                    marginLeft: 0,
                    marginRight: 0,
                    CardBackgroundColor: '#fff',
                    CardBorderRadius: 10,
                    CardLeft: 10,
                    CardRight: 10,
                    CardBottom: 10,
                    CardPaddingLeft: 10,
                    CardPaddingRight: 10,
                    CardPaddingBottom: 10,
                    CardPaddingTop: 10,
                    SQLSerialNumber: '',
                    isSetTransfer: false,
                    shopCart: '',
                }
            }, {
                title: 'brand',
                config: 'brand-config',
                slot: false,
                name: '品牌列表',
                data: {
                    backgroundImage: '',
                    backgroundSize: '',
                    backgroundAttachment: false,
                    backgroundRepeat: '',
                    backgroundColor: '#fff',//背景颜色
                    top: 10,
                    bottom: 10,
                    left: 10,
                    right: 10,
                    paddingTop: 10,
                    paddingBottom: 10,
                    paddingLeft: 0,
                    paddingRight: 0,
                    column: 4,//列数
                    type1:'0',
                    row: 2,
                    itemBottom: 10,
                    borderRadius: 10,
                    fontSize: 15,//字体大小
                    fontWeight: 100,
                    lineHeight: 25,
                    textColor: '#000',
                    iconWidth: 40,//图片大小
                    iconHeight: 40,//图片高度
                    iconRadius: 10,
                    fit: 'fill',
                    activeLeft: 5,//间距
                    activeWidth: 5,//
                    activeHeight: 5,//
                    activeRadius: 50,
                    activeColor: '#bbbbbb',
                    selectedActiveColor: '#6d6c6c',
                    dataSource: 'DS_business_brand',
                    type: 'wx',
                    url: '/pages/index/searchGoods'
                }
            }, {
                title: 'avatar',
                config: 'avatar-config',
                slot: false,
                name: '头像信息',
                data: {
                    top: 0,
                    right: 10,
                    bottom: 0,
                    left: 10,
                    paddingTop: 10,
                    paddingRight: 0,
                    paddingBottom: 10,
                    paddingLeft: 0,
                    backgroundColor: '#fff',
                    borderRadius: 10,
                }
            }, {
                title: 'title',
                config: 'title-config',
                slot: false,
                name: '标题文本',
                data: {
                    Text: '',
                    Color: '#000',
                    fontWeight: 100,
                    fontSize: 16,
                    top: 0,
                    bottom: 10,
                    left: 0,
                    right: 0,
                    type: '0',
                }
            }, {
                title: 'browsing-history',
                config: 'browsing-history-config',
                slot: false,
                name: '浏览记录',
                data: {
                    Text: '',
                    Color: '#000',
                    fontWeight: 100,
                    fontSize: 16,
                    top: 0,
                    bottom: 10,
                    left: 0,
                    right: 0,
                    type: '0',
                }
            }, {
                title: 'activity-list',
                config: 'activity-list-config',
                slot: false,
                name: '参与活动',
                data: {
                    backgroundColor:'red',//背景颜色
                    backgroundImage:'',//背景图片
                    backgroundSize:'',//尺寸
                    backgroundAttachment:'',//
                    backgroundRepeat:'',//
                    borderRadius:10,//圆角
                    top:10,
                    bottom:10,
                    left:10,
                    right:10,
                    titleHeight:50,//标题高度
                    titleFontSize:16,
                    titleColor:'#fff',
                    titleFontWeight:500,
                    titleTop:0,
                    titleBottom:0,
                    titleLeft:10,
                    titleRight:0,
                    title1Color:'yellow',//关键字
                    title1FontSize:20,
                    title1FontWeight:500,
                    cardWidth:90,//卡片宽度
                    cardHeight:120,
                    cardBackgroundColor:'rgb(254, 225, 230)',
                    cardTop:10,
                    cardBottom:10,
                    cardLeft:10,
                    cardRight:0,
                    cardBorderRadius:10,
                    card1Width:80,//子卡片
                    card1Height:105,
                    card1BackgroundColor:'#fff',
                    card1Top:-10,
                    card1Bottom:0,
                    card1Left:0,
                    card1Right:0,
                    card1BorderRadius:10,
                    imageWidth:60,//图片
                    imageHeight:60,
                    imageBorderRadius:50,
                    imageText:'活 动',
                    textLineHeight:35,//文字
                    textTop:0,
                    textBottom:0,
                    textLeft:10,
                    textRight:10,
                    textFontSize:12,
                    textColor:'red',
                    textFontWeight:500,
                    text1FontSize:14,
                    text1Color:'#000',
                    text1FontWeight:700,
                    text1Text:'前往',
                }
            },
            // {
            //     title: 'menu',
            //     config: 'menu-config',
            //     slot: false,
            //     name: '菜单列表',
            //     data:{
            //         list:[{
            //             title: '测试',
            //             icon: 'el-icon-menu',
            //         }, {
            //             title: '测试',
            //             icon: 'el-icon-menu',
            //             Children: [{
            //                 title: '测试1',
            //                 icon: 'el-icon-menu',
            //                 Children: [{
            //                     title: '测试1',
            //                     icon: 'el-icon-menu'
            //                 }]
            //             }, {
            //                 title: '测试',
            //                 icon: 'el-icon-menu',
            //             }, {
            //                 title: '测试',
            //                 icon: 'el-icon-menu',
            //             }]
            //         }, {
            //             title: '测试',
            //             icon: 'el-icon-menu',
            //             Children: []
            //         }]
            //     }
            // }
            ],
            layer: [
                {
                title: 'row',
                config: false,
                name: '栅格布局',
                data: {
                    gutter: 0,//栅格间隔
                    type: false,//type布局模式，可选flex
                    justify: 'start',//flex布局下水平排列方式
                    align: 'top',//flex布局下垂直排列方式
                    tag: 'div',//自定义标签元素类型
                },
                slot: [{
                    title: 'row-item',
                    config: 'row-item-config',
                    layer: false,
                    name: '栅格',
                    data: {
                        minHeight: 100,//最小高度
                        minHeightUnit: 'px',//最小高度单位
                        span: 24,//栅格占据的列数
                        offset: 0,//栅格左侧的间隔格数
                        push: 0,//栅格向右移动格数
                        pull: 0,//栅格向左移动格数
                        xs: false,//<768px 响应式栅格数或者栅格属性对象
                        sm: false,//≥768px 响应式栅格数或者栅格属性对象
                        md: false,//≥992px 响应式栅格数或者栅格属性对象
                        lg: false,//≥1200px 响应式栅格数或者栅格属性对象
                        xl: false,//≥1920px 响应式栅格数或者栅格属性对象
                        tag: 'div'//自定义元素标签
                    },
                    slot: []
                }]
            },
            {
                title: 'tab-bar',
                config: 'tab-bar-config',
                slot: false,
                name: '底部导航栏',
                data: {
                    tabId: 0,
                    selectedColor: '#dc3545',
                    backgroundColor: '#fff',
                    iconwidth: 30,
                    iconheight: 30,
                    iconborderRadius: 10,
                    fontSize: 12,
                    toolfontSize: 12,
                    tooltop: -2.5,
                    left: -2.5,
                    toolbackgroundColor: '#dc3545',
                    color: '#000',
                    height: 55,
                    heightUnit: 'px',
                    list: [{
                        url: '/P00000000000027.html',
                        type: 'web',
                        text: '首页',
                        icon: 'index-0.png',
                        selectedIcon: 'index-1.png',
                    }, {
                        url: '/pages/index/classify',
                        type: 'wx',
                        text: '分类',
                        icon: 'classify-0.png',
                        selectedIcon: 'classify-1.png',
                    }, {
                        url: '/pages/index/shopCart',
                        type: 'wx',
                        text: '购物车',
                        icon: 'shop-0.png',
                        selectedIcon: 'shop-1.png',
                    }, {
                        url: '/P00000000000028.html',
                        type: 'web',
                        text: '我的',
                        icon: 'my-0.png',
                        selectedIcon: 'my-1.png',
                    }]
                }
            }],
            background:{
                backgroundColor: 'rgba(255, 255, 255, 1)',//页面背景
                backgroundImage: '',
                backgroundSize: '',
                backgroundAttachment: false,
                backgroundRepeat: '',
            },
            repeat: [{
                label: '背景图像在纵向和横向上平铺',
                value: 'repeat'
            }, {
                label: '背景图像不平铺',
                value: 'no-repeat',
            }, {
                label: '背景图像在横向上平铺',
                value: 'repeat-x'
            }, {
                label: '背景图像在纵向平铺',
                value: 'repeat-y'
            }],
            options: [{
                label: '保持背景图片的原始高度和宽度',
                value: 'auto'
            }, {
                label: '宽铺满高自适应',
                value: '100% auto'
            }, {
                label: '高铺满宽自适应',
                value: 'auto 100%'
            }, {
                label: '铺满整个背景',
                value: 'cover',
            }, {
                label: '缩小到适合容器大小',
                value: 'contain'
            }],
            dialogVisible: false,//提交
        }
    },
    store,
    mounted() {
        this.sortComponent();//初始化拖拽
    },
    computed: {
        table() {//形成遍历结构
            let arrs = [], arr = [], num = 1;
            this.components.forEach((item, index) => {
                arr.push(item);
                num++;
                if (num > 3 || this.components.length == index + 1) {
                    arrs.push(arr);
                    arr = [];
                    num = 1;
                }
            });
            return arrs;
        },
        config() {
            return this.$store.state.SelecteComponent;
        },
        style() {
            const { backgroundColor, backgroundImage, backgroundSize, backgroundAttachment, backgroundRepeat } = this.background;
            let obj = {};
            if (backgroundImage) {
                obj = {
                    backgroundImage: `url(${BASE_IMG + backgroundImage})`,
                    backgroundSize: backgroundSize ? backgroundSize : 'auto',
                    backgroundRepeat
                }
            }
            if (backgroundAttachment) {
                obj.backgroundAttachment = 'fiexd'
            }
            return {
                ...obj,
                backgroundColor,
            }
        }
    },
    watch: {
        instantiate(val) {
            this.$store.commit('setComponents', val);
        }
    },
    methods: {
        handleComponent(item, index) {//点击组件
            let obj = deepClone(item);
            obj.id = createUniqueString();
            this.num++;
            if (index == null) {
                this.instantiate.push(obj);
            } else {
                this.instantiate.splice(index + 1, 0, obj);
            }
            this.$store.commit('setSelecteComponent', obj)
        },
        handleRemove(item, index){//删除组件
            if(this.$store.state.SelecteComponent.id == item.id){
                this.$store.commit('setSelecteComponent', {})
            }
            this.instantiate = this.instantiate.filter(i=>i.id!=item.id);
        },
        sortComponent() {//拖拽组件
            const that = this;
            //从一个组件从组件层拖拽到渲染层
            $(".draggable").draggable({
                appendTo: "body",
                helper: "clone"
            });
            $(".droppable").droppable({
                accept: ".draggable",
                helper: "clone",
                hoverClass: "droppable-active",
                drop: function (event, ui) {
                    var $orig = $(ui.draggable);
                    if (!$orig.hasClass("dropped")) {
                        let item = $orig.data('component')
                        that.handleComponent(item);
                    }
                }
            })
            //在一个渲染层下拖拽排序
            $ul = that.$el.querySelector("#render");
            Sortable.create($ul, {
                handle: ".dropped",
                draggable: ".dropped",
                animation: 150,
                onUpdate: (event) => {
                    let newIndex = event.newIndex, oldIndex = event.oldIndex;
                    $li = $ul.children[newIndex], $oldLi = $ul.children[oldIndex];
                    $ul.removeChild($li)
                    if (newIndex > oldIndex) {
                        $ul.insertBefore($li, $oldLi)
                    } else {
                        $ul.insertBefore($li, $oldLi.nextSibling)
                    }
                    let item = that.instantiate[oldIndex];
                    that.instantiate.splice(oldIndex, 1);
                    that.instantiate.splice(newIndex, 0, item);
                }
            })
        }
    }
}
//组件通用
const global = {
    props: ['data', 'id'],
    computed: {
        SortableSwitch() {//是否开启拖拽
            return this.$store.state.SortableSwitch
        },
        layerBorder() {//是否开启拖拽
            return this.layer && this.SortableSwitch ? '1px solid #67C23A' : ''
        },
        width() {//宽度
            return this.data.width + this.data.widthUnit
        },
        height() {//高度
            return this.data.height + this.data.heightUnit
        },
        Left() {//左边距
            return this.data.left + this.data.leftUnit
        },
        Right() {//右边距
            return this.data.right + this.data.rightUnit
        },
        Top() {//上边距
            return this.data.top + this.data.topUnit
        },
        Bottom() {//下边距
            return this.data.bottom + this.data.bottomUnit
        },
        Radius() {//角度
            return this.data.radius + 'px'
        },
        fontSize() {//字体大小
            return this.data.fontSize + this.data.fontSizeUnit
        },
        fontWeight() {//字体粗细
            return this.data.fontWeight
        },
        textAlign() {//文字所在位置
            return this.data.textAlign
        },
        color() {//字体颜色
            return this.data.color
        },
        backgroundColor() {//背景颜色
            return this.data.backgroundColor
        },
        minHeight() {//最小高度
            return this.data.minHeight + this.data.minHeightUnit
        },
        borderTop() {//上边框
            return `${this.data.borderTopWidth}${this.data.borderTopWidthUnit} ${this.data.borderTopStyle} ${this.data.borderTopColor}`
        },
        borderBottom() {//下边框
            return `${this.data.borderBottomWidth}${this.data.borderBottomWidthUnit} ${this.data.borderBottomStyle} ${this.data.borderBottomColor}`
        },
        borderLeft() {//左边框
            return `${this.data.borderLeftWidth}${this.data.borderLeftWidthUnit} ${this.data.borderLeftStyle} ${this.data.borderLeftColor}`
        },
        borderRight() {//右边框
            return `${this.data.borderRightWidth}${this.data.borderRightWidthUnit} ${this.data.borderRightStyle} ${this.data.borderRightColor}`
        },
        Query() {
            return this.$store.state.Query
        }
    }
}
//组件配置通用
const globalConfig = {
    props: ['data', 'id'],
    store,//仓库
    data() {
        return {
            repeat: [{
                label: '背景图像在纵向和横向上平铺',
                value: 'repeat'
            }, {
                label: '背景图像不平铺',
                value: 'no-repeat',
            }, {
                label: '背景图像在横向上平铺',
                value: 'repeat-x'
            }, {
                label: '背景图像在纵向平铺',
                value: 'repeat-y'
            }],
            backSize: [{
                label: '保持背景图片的原始高度和宽度',
                value: 'auto'
            }, {
                label: '宽铺满高自适应',
                value: '100%auto'
            }, {
                label: '高铺满宽自适应',
                value: 'auto 100%'
            }, {
                label: '铺满整个背景',
                value: 'cover',
            }, {
                label: '缩小到适合容器大小',
                value: 'contain'
            }],
            wxPage:[{
                label: '搜索',
                value: '/pages/index/search',
            },{
                label: '收货地址',
                value: '/pages/delivery/address',
            },{
                label: '购物车',
                value: '/pages/index/shopCart',
            },{
                label: '个人信息',
                value: '/pages/my/information',
            },{
                label: '绑定身份',
                value: '/pages/index/login',
            },{
                label: '我的积分',
                value: '/pages/my/myPoints',
            },{
                label: '分类',
                value: '/pages/index/classify',
            },{
                label: '我的订单',
                value: '/pages/my/myOrder',
            },{
                label: '售后订单',
                value: '/pages/my/afterSales',
            },{
                label: '客服中心',
                value: '/pages/service/serviceCenter',
            }]
        }
    },
    computed: {
        SelectElement() {
            return this.$store.state.SelectElement
        },
        unit() {
            return this.$store.state.unit
        },
        fit() {
            return this.$store.state.fit
        },
        size() {
            return this.$store.state.size
        },
        predefineColors() {
            return this.$store.state.predefineColors
        },
        Query() {
            return this.$store.state.Query
        }
    },
    methods: {
        getPage(type){
            if (type == 'wx') {
                return this.wxPage;
            }else if (type == 'web'){
                page((webPage)=>{
                    return webPage
                })
            }
            function page(callback) {
                $.ajax({
                    headers: requestHeaders(),
                    url: `${BASE_URL2}/generalBusiness/generalQueryByTableName`,
                    type: 'POST',
                    data: {
                        Data: 'base_page_info',
                        Condition: "Row_Status = '0'",
                    },
                    success: function (res) {
                        let webPage = [];
                        res.forEach(item=>{
                            webPage.push({
                                label:item.Page_Name,
                                value:'/'+item.Page_SerialNumber+'.html'
                            })
                        })
                        callback(webPage)
                    },
                    complete: function (XMLHttpRequest) {
                        requestPretreatment(XMLHttpRequest);
                    },
                    dataType: "json"
                });
            }
        }
    }
}
//拖拽配置
const drag = {
    data() {
        return {
            isSwitch: false,
            Sortable: null,
        }
    },
    watch: {
        isSwitch(val) {
            this.Sortable.option('disabled', !val);
        }
    },
    methods: {
        sortable(that, container, element, jsonarray, callback) {
            var $ul = that.$el.querySelector(container)
            $ul.addEventListener('selectstart', function (e) {
                e.preventDefault();
            })
            this.Sortable = Sortable.create($ul, {
                handle: element,
                draggable: element,
                animation: 150,
                onUpdate: (event) => {
                    let newIndex = event.newIndex, oldIndex = event.oldIndex;
                    $li = $ul.children[newIndex],
                        $oldLi = $ul.children[oldIndex]
                    //先删除移动的节点, 再插入移动的节点到原有节点，还原了移动的操作
                    $ul.removeChild($li)
                    if (newIndex > oldIndex) {
                        $ul.insertBefore($li, $oldLi)
                    } else {
                        $ul.insertBefore($li, $oldLi.nextSibling)
                    }
                    //通过改变vue遍历数组移动节点
                    let item = jsonarray[oldIndex];
                    jsonarray.splice(oldIndex, 1);
                    jsonarray.splice(newIndex, 0, item);
                    if (callback) callback(newIndex, oldIndex);
                }
            })
            this.Sortable.option('disabled', true);
        }
    }
}
//初始化渲染页面预览组件
Vue.component('render', {//layer?'none':
    template: `<div id="render"><div :style="style(item)" class="form-group draggable ui-draggable dropped" v-for="(item,id) in data" :key="id">
        <component :data="item.data" :layer="item.layer" :id="item.id" :is="item.title+'-text'">
            <template v-if="item.slot" v-slot:default>
                <render :data="item.slot" :layer="true"></render>
            </template>
        </component>
        <span v-show="!layer&&!hide" style="z-index:9;position: absolute;left:0;top:0;font-size: 12px; padding:0 5px; color:#fff;" :style="{backgroundColor:config.id==item.id?'#67C23A':'#909399'}">
            {{item.id}}
        </span>
        <span v-show="!layer&&!hide" style="z-index:9; position: absolute;right:0;bottom:0;font-size: 20px; height:30px; line-height: 30px; border-radius: 20px 0 0 0;" :style="{backgroundColor:config.id==item.id?'#67C23A':'#909399'}">
            <i @click="Copy(item,id)" class="el-icon-document-copy" style="color:#fff;cursor: pointer; margin-left:10px;"></i>
            <i @click="Remove(item,id)" class="el-icon-delete" style="color:#fff;cursor: pointer; margin-left:5px"></i>
            <i @click="$store.commit('setSelecteComponent',item)" class="el-icon-s-tools" style="color:#fff;cursor: pointer; margin:0 5px"></i>
        </span>
    </div></div>`,
    props: ['data', 'layer'],
    store,
    computed: {
        config() {
            return this.$store.state.SelecteComponent;
        },
        hide() {
            return this.$store.state.hide
        },
        style(){
            return function (item) {
                return {
                    position: 'relative',
                    border:this.$store.state.hide?'none':this.config.id==item.id?'1px solid #67C23A':'1px solid #909399',
                }
            }
        }
    },
    methods: {
        Copy(item, index) {
            this.$confirm('确认是否要复制该元素?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$emit('copy', item, index)
            }).catch(() => { });
        },
        Remove(item, index) {
            this.$confirm('确认是否要删除该元素?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$emit('remove', item, index)
            }).catch(() => { });
        }
    }
})
const submit = {
    template: `<el-dialog title="页面名称" :visible.sync="visibleDialog" width="700px">
    <el-form ref="contract" :model="form" :rules="rules" :inline-message="true">
        <el-descriptions :column="1" border size="small">
            <el-descriptions-item label="页面名称">
                <el-form-item prop="Page_Name">
                    <el-input v-model.trim="form.Page_Name" placeholder="请输入页面名称"></el-input>
                </el-form-item>
            </el-descriptions-item>
        </el-descriptions>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="$emit('update:visible',false)">取消</el-button>
        <el-button :loading="loading" type="primary" @click="submitForm('contract')">提交</el-button>
    </span></el-dialog>`,
    props: ['data', 'background', 'visible'],
    watch: {
        visible() {
            this.visibleDialog = this.visible
        },
        visibleDialog(val) {
            this.$emit('update:visible', val)
        },
    },
    computed:{
        style() {
            const { backgroundColor, backgroundImage, backgroundSize, backgroundAttachment, backgroundRepeat } = this.background;
            let obj = {};
            if (backgroundImage) {
                obj = {
                    backgroundImage: `url(${BASE_IMG + backgroundImage})`,
                    backgroundSize: backgroundSize ? backgroundSize : 'auto',
                    backgroundRepeat
                }
            }
            if (backgroundAttachment) {
                obj.backgroundAttachment = 'fiexd'
            }
            return {
                ...obj,
                backgroundColor,
            }
        }
    },
    methods:{
        humpName(str) {//将组件驼峰命名
            let arr = str.split('-');
            let newstr = ""
            for (let index = 0; index < arr.length; index++) {
                if (index == 0) {
                    newstr = newstr + arr[index]
                } else {
                    newstr = newstr + arr[index].charAt(0).toUpperCase() + arr[index].slice(1);
                }
            }
            if (newstr == "") {
                newstr = str;
            }
            return newstr
        },
        generateHTML(components,Page_SerialNumber='') {//根据组件生成页面字符串
            let style = "";
            for (let key in this.style) {
                style = style + camelToKebab(key) + ":" + this.style[key] + ";"
            }
            let component = "", data = "";
            components.forEach(item => {
                //1.遍历组件
                component = component + `<${item.title}-text :data="D${item.id}" id="${item.id}"></${item.title}-text>`;
                //2.数据
                data = data + `D${item.id}:${JSON.stringify(item.data)},`
            })
            //4.获取参数
            let HTML = `<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <title>${this.form.Page_Name}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="${BASE_URL3}component/elementUI/index.css">
    <link rel="stylesheet" href="${BASE_URL3}style/wangeditor.css">
    <link rel="stylesheet" href="${BASE_URL3}style/index.css">
    
</head>
<body style="${style}">
    <div id="app" v-cloak>
        ${component}
    </div>
    <script type="text/javascript" src="${BASE_URL3}utils/wangeditor.js"></script>
    <script type="text/javascript" src="${BASE_URL3}utils/jquery.min.js"></script>
    <script type="text/javascript" src="${BASE_URL3}utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="${BASE_URL3}utils/vue.min.js"></script>
    <script type="text/javascript" src="${BASE_URL3}utils/vuex.min.js"></script>
    <script type="text/javascript" src="${BASE_URL3}component/elementUI/index.js"></script>
    <script type="text/javascript" src="${BASE_URL3}component/component.js"></script>
    <script type="text/javascript" src="${BASE_URL3}config/config.js"></script>
    <script type="text/javascript" src="${BASE_URL3}utils/compressor.js"></script>
    <script type="text/javascript" src="${BASE_URL3}utils/ID_Validity.js"></script>
    <script type="text/javascript" src="${BASE_URL3}utils/utils.js"></script>
    <script type="text/javascript" src="${BASE_URL3}view/components/utils.js"></script>
    <script type="text/javascript" src="${BASE_URL3}utils/jweixin.js"></script>
    <script type="text/javascript" src="${BASE_URL3}view/components/activityProducts.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    ${data}
                }
            },
            store,
            //mounted(){
            //    if(getQueryObject().Open_ID){
            //        $.ajax({
            //            url: "${BASE_URL1}/RedisAdd",
            //            type: 'GET',
            //            data: {
            //                Key: getQueryObject().Open_ID + ";;BASE_Path",
            //                Main: JSON.stringify({
            //                    Path:"${BASE_URL4}/${Page_SerialNumber}.html",
            //                    Query:getQueryObject(),
            //                }), 
            //                Expire:'300'
            //            },
            //            dataType: "json"
            //        })
            //    }
            //},
        })
    </script>
</body>
</html>`; console.log(Page_SerialNumber);
            return window.btoa(unescape(encodeURIComponent(encodeURIComponent(HTML))))
        },
    }
}
//添加菜单组件
Vue.component('submitDialog', {
    mixins:[submit],
    data() {
        return {
            visibleDialog: false,
            Icon: [],//图标库
            form: {
                Page_SerialNumber: '',//主键
                Page_Name: '',//页面名称
                Absolute_Path: '',//存盘绝对路径
                File_String: '',//页面字符串文本
                Path_JSON: '',
                Background_JSON:'',//背景样式
            },
            rules: {
                Page_Name: [{ required: true, message: '请输入页面名称', trigger: 'blur' }],
            },
            loading: false,
        }
    },
    methods: {
        submitForm(formName) {//提交
            const that = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    that.loading = true;
                    that.form.File_String = that.generateHTML(that.data,that.form.Page_SerialNumber);
                    that.form.Path_JSON = JSON.stringify(that.data);
                    that.form.Background_JSON = JSON.stringify(that.background)
                    $.ajax({
                        headers: requestHeaders(),
                        url: `${BASE_URL2}/generalBusiness/generalSave`,
                        type: 'POST',
                        data: {
                            Data: JSON.stringify({ Add: { base_page_info: [that.form] } })
                        },
                        success: function (res) {
                            if (res.Status === 'success') {
                                that.$message.success("提交成功")
                                window.history.go(-1);
                            } else {
                                that.$message.error("提交失败，请稍后再试")
                            }
                        },
                        complete: function (XMLHttpRequest) {
                            that.loading = false
                            requestPretreatment(XMLHttpRequest);
                        },
                        dataType: "json"
                    })
                } else {
                    return false;
                }
            })
        }
    },
})
//修改菜单组件
Vue.component('submitEditDialog', {
    mixins:[submit],
    props: ['form'],
    data() {
        return {
            visibleDialog: false,
            Icon: [],//图标库
            rules: {
                Page_Name: [{ required: true, message: '请输入页面名称', trigger: 'blur' }],
            },
            loading: false,
        }
    },
    methods: {
        submitForm(formName) {//提交
            const that = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    that.loading = true;
                    let form = deepClone(that.form);
                    form.Path_JSON = JSON.stringify(that.data);
                    form.File_String = that.generateHTML(that.data);
                    form.Background_JSON = JSON.stringify(that.background)
                    $.ajax({
                        headers: requestHeaders(),
                        url: `${BASE_URL2}/generalBusiness/generalSave`,
                        type: 'POST',
                        data: {
                            Data: JSON.stringify({ Modify: { base_page_info: [form] } })
                        },
                        success: function (res) {
                            if (res.Status === 'success') {
                                $.ajax({
                                    headers: requestHeaders(),
                                    url: `${BASE_URL2}/generalBusiness/generalSaveFiles`,
                                    type: 'POST',
                                    data: {
                                        Data: JSON.stringify({
                                            FileName: form.Page_SerialNumber,
                                            FileContent: form.File_String
                                        })
                                    },
                                    success: function (res) {
                                        if (res.Status == 'success') {
                                            that.$message.success("修改成功")
                                            window.history.go(-1);
                                        }
                                    },
                                    complete: function (XMLHttpRequest) {
                                        requestPretreatment(XMLHttpRequest);
                                    },
                                    dataType: "json"
                                })
                            } else {
                                that.$message.error("提交失败，请稍后再试")
                            }
                        },
                        complete: function (XMLHttpRequest) {
                            that.loading = false
                            requestPretreatment(XMLHttpRequest);
                        },
                        dataType: "json"
                    })
                } else {
                    return false;
                }
            })
        }
    },
})